<template>
  <div class="">
    <h3>选择设备</h3>
    <a-list size="small" bordered :data-source="starList">
      <a-list-item
        slot="renderItem"
        slot-scope="item"
        style="cursor:pointer;"
        @click="handleStarLink(item.starlinkId)"
        :class="item.starlinkId === currentId ? 'active' : ''"
      >
        星链设备ID：{{ item.starlinkId }}
      </a-list-item>
    </a-list>
    <div class="page-line">
      <a-pagination
        v-model="current"
        @change="changeCurrent"
        :defaultPageSize="20"
        :total="total"
        size="small"
        show-less-items
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    starList: Array,
    currentId: Number,
    total: Number,
  },
  data() {
    return {
      current: 1,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleStarLink(id) {
      console.log(id);
      this.$emit('handleStarLink', id);
    },
    changeCurrent() {
      console.log('翻页');
      // 改变当前分页
      this.$emit('changeCurrent', this.current);
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.page-line {
  padding: 10px 0;
  text-align: center;
}
.active {
  color: #1677ff;
}
h3 {
  text-align: left;
  border-bottom: 1px solid #ddd;
  line-height: 40px;
  padding-left: 16px;
  margin: 0;
}
.ant-list-bordered {
  border: none;
  border-radius: none;
}
</style>
